<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>04员工表格练习</title>
</head>

<body>
  <input id="uname" placeholder="请输入姓名">
  <input id="usalary" placeholder="请输入工资">
  <input id="uPost" placeholder="输入岗位">
  <button onclick="addEmp()">点我添加员工</button>

  <table border="1px">
    <caption>员工表</caption>
    <tr>
      <th>姓名</th>
      <th>工资</th>
      <th>岗位</th>
    </tr>
  </table>
  <script>
    function addEmp() {
      // 1.拿到用户在输入框中输入的数据
      let uname = document.getElementById('uname').value;
      let usalary = document.getElementById('usalary').value;
      let upost = document.getElementById('uPost').value;
      //8.判断用户输入的信息是否为空，为空则弹出提示
      if (uName == '' || uSalary == '' || uJob == '') {
        alert('请输入完整信息！');
        return;
      }
      // 2.创建表格的tr对象
      let tr = document.createElement('tr');
      // 3.创建当前行的三个td对象
      let nameTd = document.createElement('td');
      let salaryTd = document.createElement('td');
      let jobTd = document.createElement('td');
      // 4.将拿到的数据装如单元格td中
      nameTd.innerHTML = uname;
      salaryTd.innerHTML = usalary;
      jobTd.innerHTML = upost;
      // 5.将准备好的td装到tr中
      tr.append(nameTd, salaryTd, jobTd);
      // 6.将准备好的tr装到表格table中
      document.querySelector('table').append(tr);
      // 7.插入数据后清空输入框
      document.getElementById('uname').value = "";
      document.getElementById('usalary').value = "";
      document.getElementById('uPost').value = "";

    }

  </script>
</body>

</html>